<template>
  <div>
    <top></top>

    <div class="crumb">
      <div class="w">
        <div class="crumb-content">
          <a href="/main" class="link">MyPetStore</a>
          <span>></span>
          <span class="link-text">Cart</span>
          <span id="BackLink" class="Backlink">
            <a href="/main"> Return to Main Menu </a>
          </span>
        </div>
      </div>
    </div>

    <div id="Catalog">
      <div id="Cart">
        <div class="page-wrap w">
          <div class="panel">
            <h2><i class="fa-solid fa-cart-shopping">Shopping Cart</i></h2>
            <div class="panel-title"></div>
            <div class="panel-body">
              <div id="updatecart">
                <table class="product-top-table">
                  <tr>
                    <!-- <th class="cell-img">Images</th> -->
                    <th class="cell-itemid">Item ID</th>
                    <th class="cell-productid">Product ID</th>
                    <!-- <th class="cell-desp">Description</th> -->
                    <!-- <th class="cell-stock">In Stock?</th> -->
                    <th class="cell-quantity">Quantity</th>
                    <th class="cell-listprice">List Price</th>
                    <!-- <th class="cell-totalprice">Total Cost</th> -->
                    <td class="cell-remove">Operation</td>
                  </tr>
                </table>

                <table class="product-table" id="product-table">
                  <tr v-for="cartItem in cartList">
                    <!-- <td class="cell-img">
                      <div class="checkbox">
                        <input type="checkbox" class="checkboxes" />
                        <a th:href="@{/itemForm(itemId=${cartItem.itemId})}">
                          <img
                            th:src="${cartItem.getImgPath()}"
                            class="product-img"
                          />
                        </a>
                      </div>
                    </td> -->
                    <td class="cell-itemid">
                      <a class="link">{{ cartItem.itemId }}</a>
                    </td>
                    <td class="cell-productid">{{ cartItem.productId }}</td>

                    <td class="cell-quantity">
                      <!-- <span
                        ><button
                          type="button"
                          id="sub"
                          class="cell-quantity-button"
                        >
                          -
                        </button></span
                      > -->
                      <span>&nbsp;</span>
                      <span>
                        <!-- <input
                          id="input"
                          type="text"
                          class="cell-quantity-input"
                          v-model="cartItem.quantity"
                        /> -->

                        <div></div>
                        <el-input-number
                          v-model="cartItem.quantity"
                          :min="0"
                          @change="
                            changeQuantity(cartItem.quantity, cartItem.itemId)
                          "
                          label="商品质量"
                        ></el-input-number>
                      </span>
                      <span>&nbsp;</span>
                      <!-- <span
                        ><button
                          type="button"
                          id="add"
                          class="cell-quantity-btn"
                        >
                          +
                        </button></span
                      > -->
                    </td>
                    <td class="cell-listprice">
                      {{ cartItem.listPrice }}
                    </td>
                    <td class="cell-remove">
                      <a
                        @click="removeItem(cartItem.itemId)"
                        class="cell-removeButton"
                        style="cursor: pointer"
                      >
                        Remove
                      </a>
                    </td>
                  </tr>
                </table>
                <table class="submit-content">
                  <tr>
                    <th class="nbs">&nbsp;</th>
                    <th class="sub-content-left">
                      <a href="#" class="fa-regular fa-trash-can"></a>
                      <!-- <input
                        type="submit"
                        class="delete"
                        value="Delete Seleted"
                      /> -->
                    </th>
                    <th class="nbsp">&nbsp;</th>

                    <th class="subtotal">Sub Total:</th>
                    <th id="total-price" class="total-price">
                      <a href="">{{ subtotal }}</a>
                    </th>
                    <th>
                      <a href="order" class="btn order-submit">Checkout</a>
                    </th>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>

        <div id="Separator">&nbsp;</div>
      </div>
    </div>

    <bottom></bottom>
  </div>
</template>

<script>
import Bottom from "../common/Bottom.vue";
import Top from "../common/Top.vue";
import { refreshCarts } from "..//..//utils//cart";
import { mapState } from "vuex";
export default {
  data() {
    return {
      num: 1,
    };
  },
  components: {
    Bottom,
    Top,
  },
  methods: {
    changeQuantity(value, itemId) {
      console.log(value, itemId);
      this.$http
        .put(`/carts/${this.account.userId}/items/${itemId}?quantity=${value}`)
        .then(async (res) => {
          console.log(res);
          let { status } = res.data;
          if (status == 0) {
            // 刷新购物车
            await refreshCarts();
            this.$notify({
              title: "修改成功",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "修改失败",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    removeItem(itemId) {
      this.$http
        .delete(`/carts/${this.account.userId}/items/${itemId}`)
        .then(async (res) => {
          console.log(res);
          let { status } = res.data;
          if (status == 0) {
            // 刷新购物车
            await refreshCarts();
            this.$notify({
              title: "删除成功",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "删除失败",
            });
          }
        });
    },
  },
  async mounted() {
    await refreshCarts();
    console.log(this.cartList);
  },
  computed: {
    ...mapState({
      cartList: (state) => {
        let list = JSON.parse(state.cartList);
        if (list == null) return [];
        return list.map((element) => {
          element.quantity = parseInt(element.quantity);
          console.log(element.quantity);
          return element;
        });
      },
      account: (state) => JSON.parse(state.account),
    }),
    subtotal() {
      if (this.cartList == null || this.cartList.length == 0) return 0;
      let sum = 0;
      for (let i = 0; i < this.cartList.length; i++) {
        const element = this.cartList[i];
        sum += parseFloat(element.item.listPrice);
      }
      return sum;
    },
  },
};
</script>

<style scoped>
@import url(../../assets/css/mypetstoreNew.css);
@import url(../../assets/css/cart.css);
</style>
